<script setup lang='ts'>
import type { VxePagerEvents } from 'vxe-table'

import { useGetEnterpriseList, useGetSecondaryList } from '@fl/api/mall-api'
import { SearchTable } from '@fl/components'
import { genOssUrl, oss } from '@fl/logics/oss'
import { cloneDeep } from 'lodash-es'
import { useRoute, useRouter } from 'vue-router'

const { query } = useRoute()

const router = useRouter()

const { data: secondaryData, isLoading: secondaryLoading } = useGetSecondaryList()

const loading = computed(() => secondaryLoading.value)

const activeName = ref('first')

const selectList = ref<any>([])

const gridOptions = reactive({
    columns: [
        { slots: { default: 'img' }, width: 200 },
        { slots: { default: 'info' } },
    ],
    data: [],
    height: 650,
    showHeader: false,
    showOverflow: false,
})

const initialPage = {
    currentPage: 1,
    pageSize: 10,
    total: 0,
}
const tablePage = ref(cloneDeep(initialPage))

const params = computed(() => {
    return {
        cat: selectList.value?.[0] || '',
        enterpriseName: query?.enterpriseName || '',
        page: tablePage.value.currentPage,
        size: tablePage.value.pageSize,
    }
})

const { data: enterpriseData, isLoading: enterpriseLoading } = useGetEnterpriseList(params)

const showNumber = computed(() => {
    return Number(tablePage.value.total) > 99 ? '99+' : Number(tablePage.value.total)
})

const title = computed(() => selectList.value.length || query?.enterpriseName ? `为你找到 <span style="color:#da0004">${showNumber.value}</span> 家供应商` : '为你推荐供应商')

const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
    tablePage.value.currentPage = currentPage
    tablePage.value.pageSize = pageSize
}

function searchList(val: any) {
    selectList.value = []
    tablePage.value.currentPage = 1
    selectList.value.push(val.cid)
    console.log(selectList.value, '111')
}

function showDetail(val: any) {
    const routeData = router.resolve({
        name: 'supply-show',
        params: { id: val.id },
    })
    window.open(routeData.href, '_blank')
}

watchEffect(() => {
    if (enterpriseData.value) {
        tablePage.value.total = enterpriseData.value?.total ?? 0
    }
})

onMounted(() => {
    if (query?.cat) {
        selectList.value.push(Number(query?.cat))
    }
})
</script>

<template>
    <ElSkeleton v-if="loading"
                :rows="5"
    />

    <div v-else
         class="pb-40 w-full"
    >
        <el-tabs v-model="activeName"
                 class="header-tab mb-20 bg-#fff"
        >
            <el-tab-pane label="找供应商"
                         name="first"
            />
        </el-tabs>
        <!-- 搜索栏 -->
        <div class="p-20 mx-auto mb-20 bg-#fff flex flex-col gap-20 w-1300">
            <div class="mr-20 font-bold flex">
                <div class="w-100">
                    资源分类：
                </div>

                <div class="flex-1">
                    <span v-for="item in secondaryData"
                          :key="item.cid"
                          class="mb-20 mr-20 inline-block cursor-pointer"
                          :class="{ select: selectList.includes(item.cid) || '' }"
                          @click="searchList(item)"
                    >
                        {{ item?.categoryName }}
                    </span>
                </div>
            </div>
        </div>

        <div class="p-20 mx-auto mb-20 bg-#fff w-1300">
            <div class="text-20 font-bold"
                 v-html="title"
            />

            <SearchTable v-bind="gridOptions"
                         v-model:pager="tablePage"
                         :loading="enterpriseLoading"
                         :data="enterpriseData?.records"
                         @page-change="handlePageChange"
            >
                <template #img="{ row }">
                    <el-image style="width: 120px; height: 120px"
                              :src="row.logo?.split(';')?.[0]"
                              :preview-src-list="row.logo?.split(';')"
                              fit="cover"
                    >
                        <template #error>
                            <div style="width: 120px; height: 120px"
                                 class="flex justify-center items-center"
                            >
                                暂无图片
                            </div>
                        </template>
                    </el-image>
                </template>

                <template #info="{ row }">
                    <div class="py-10 text-left flex flex-col gap-15 h-200">
                        <div class="text-20 text-#1D2129 font-bold truncate cursor-pointer"
                             :title="row.enterpriseName"
                             @click="showDetail(row)"
                        >
                            {{ row.enterpriseName }}
                        </div>

                        <div class="text-#767676 truncate cursor-pointer"
                             :title="row?.registeredAddress"
                        >
                            注册地址：{{ row?.registeredAddress }}
                        </div>

                        <div class="text-#767676 truncate cursor-pointer"
                             :title="row?.registeredCapital"
                        >
                            注册资金：{{ row?.registeredCapital }}
                        </div>

                        <div class="text-#767676 truncate flex-1 cursor-pointer"
                             :title="row?.catName"
                        >
                            分供方分类：{{ row?.catName }}
                        </div>
                    </div>
                </template>

                <template #empty>
                    <div class="text-20 text-#C9CDD4 font-500">
                        <el-image style="width: 220px; height: 220px"
                                  :src="genOssUrl(oss.go.nodata)"
                                  fit="cover"
                        />

                        <p>暂时没有为你找到合适的供应商</p>
                    </div>
                </template>
            </SearchTable>
        </div>
    </div>
</template>

<style lang="scss" scoped>
:deep(.el-tabs__header) {
    margin: 0;
}

:deep(.el-tabs__item) {
    font-size: 18px;
    font-weight: bold;
}

.header-tab {
    padding: 0 calc((100% - 1300px) / 2);
}

:deep(.vxe-body--row) {
    background: #fff !important;
}

.select {
    color: red;
}
</style>
